<template>
  <div class="jobs-page">
    <el-card class="jobs-card">
      <div class="jobs-header">
        <h2><i class="el-icon-suitcase"></i> 岗位管理</h2>
      </div>
      <el-form :inline="true" :model="filters" class="filter-form" @submit.prevent>
        <el-form-item label="岗位名称">
          <el-input v-model="filters.name" placeholder="输入岗位名称" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="工作地点">
          <el-input v-model="filters.location" placeholder="输入工作地点" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filters.status" placeholder="全部" clearable style="width: 140px;">
            <el-option label="可申请" :value="0" />
            <el-option label="不可申请" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button @click="resetFilters">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="jobs-table-wrapper">
        <el-table :data="tableData.records" style="width: 100%;" height="100%" border stripe>
          <el-table-column prop="name" label="岗位名称" min-width="120" />
          <el-table-column prop="description" label="工作内容" min-width="180" show-overflow-tooltip />
          <el-table-column prop="location" label="工作地点" min-width="100" />
          <el-table-column prop="salary" label="薪资(元/小时)" min-width="100" />
          <el-table-column prop="time" label="工作时间" min-width="120" />
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 0 ? 'success' : 'info'">
                {{ row.status === 0 ? '可申请' : '不可申请' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, jumper, ->, total"
          :total="tableData.total"
          :page-size="filters.size"
          :current-page="filters.page"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
    <el-dialog 
      v-model="dialogVisible" 
      :title="dialogTitle" 
      width="500px"
      :close-on-click-modal="false"
      @closed="formRef?.resetFields()"
    >
      <el-form 
        :model="form" 
        :rules="rules"
        ref="formRef" 
        label-width="100px"
        class="dialog-form"
        @submit.prevent
      >
        <el-form-item label="岗位名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="工作内容" prop="description">
          <el-input 
            v-model="form.description" 
            type="textarea" 
            :rows="3"
            placeholder="请输入工作内容" 
          />
        </el-form-item>
        <el-form-item label="工作地点" prop="location">
          <el-input v-model="form.location" placeholder="请输入工作地点" />
        </el-form-item>
        <el-form-item label="薪资" prop="salary">
          <el-input-number 
            v-model="form.salary" 
            :min="0"
            :precision="2"
            :step="0.5"
            style="width: 100%"
            placeholder="请输入薪资(元/小时)"
          />
        </el-form-item>
        <el-form-item label="工作时间" prop="time">
          <el-input v-model="form.time" placeholder="请输入工作时间，如：周一至周五 9:00-18:00" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">可申请</el-radio>
            <el-radio :label="1">不可申请</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const filters = ref({
  name: '',
  location: '',
  status: null,
  page: 1,
  size: 8
})

const tableData = ref({
  records: [],
  total: 0
})

const dialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)
const form = reactive({
  id: null,
  name: '',
  description: '',
  location: '',
  salary: '',
  time: '',
  status: 0
})
const formRef = ref()

const rules = {
  name: [
    { required: true, message: '请输入岗位名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入工作内容', trigger: 'blur' }
  ],
  location: [
    { required: true, message: '请输入工作地点', trigger: 'blur' }
  ],
  salary: [
    { required: true, message: '请输入薪资', trigger: 'blur' },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的薪资金额', trigger: 'blur' }
  ],
  time: [
    { required: true, message: '请输入工作时间', trigger: 'blur' }
  ]
}

const fetchData = async () => {
  const res = await request.get('/api/position/teacher-list', { params: filters.value })
  if (res.code === 0) {
    tableData.value = {
      records: res.data.records,
      total: res.data.total
    }
    filters.value.page = res.data.current
    filters.value.size = res.data.size
  }
}

const handlePageChange = (val) => {
  filters.value.page = val
  fetchData()
}

const resetFilters = () => {
  filters.value = { name: '', location: '', status: null, page: 1, size: 8 }
  fetchData()
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑岗位'
  isEdit.value = true
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该岗位吗？', '提示', {
    type: 'warning',
  }).then(async () => {
    try {
      const res = await request.delete(`/api/position/delete/${row.id}`)
      if (res.code === 0) {
        ElMessage.success('删除成功')
        fetchData()
      } else {
        ElMessage.error(res.msg || '删除失败')
      }
    } catch (e) {
      ElMessage.error('删除失败')
    }
  })
}

const handleSubmit = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    const submitData = { ...form }
    const res = await request.put('/api/position/update', submitData)
    if (res.code === 0) {
      ElMessage.success('修改成功')
      dialogVisible.value = false
      fetchData()
    } else {
      ElMessage.error(res.msg || '修改失败')
    }
  } catch (e) {
    ElMessage.error('请检查表单内容')
  }
}

fetchData()
</script>

<style scoped>
.jobs-page {
  min-height: 100vh;
  background: #f7f8fa;
  padding: 0;
  padding-top: 32px;
}
.jobs-card {
  max-width: 1200px;
  width: 98%;
  margin: 0 auto 0 auto;
  border-radius: 12px;
  box-shadow: none;
  border: none;
  background: #fff;
  padding: 0 0 12px 0;
}
.jobs-header {
  margin-bottom: 8px;
  padding: 20px 32px 0 32px;
}
.jobs-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.filter-form {
  margin-bottom: 12px;
  padding: 12px 24px 0 24px;
  background-color: #f8f9fa;
  border-radius: 8px 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.jobs-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 2px;
  padding: 0 16px;
  box-shadow: none;
  background: #fff;
}
.el-table {
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
.el-table th {
  background: #e9eef6;
  color: #222;
  font-weight: 700;
  font-size: 15px;
}
.el-table .el-button {
  border-radius: 6px;
  font-weight: 500;
  box-shadow: none;
  transition: background 0.2s;
}
.el-table .el-button--primary {
  background: linear-gradient(90deg, #5cb6ff 0%, #409eff 100%);
  border: none;
}
.el-table .el-button[disabled] {
  background: #f0f0f0;
  color: #aaa;
}
.el-tag.el-tag--success {
  background: #e6f7ec;
  color: #52c41a;
  border: none;
}
.el-tag.el-tag--info {
  background: #f0f1f3;
  color: #909399;
  border: none;
}
.pagination-wrapper {
  margin-top: 12px;
  text-align: right;
  padding-right: 24px;
}
</style> 